<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="<%=basePath%>static/lib/html5.js"></script>
<script type="text/javascript" src="<%=basePath%>static/lib/respond.min.js"></script>
<script type="text/javascript" src="<%=basePath%>static/lib/PIE_IE678.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/lib/Hui-iconfont/1.0.7/iconfont.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<script src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.min.js"></script>  
<script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>  
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>  
<script type="text/javascript" src="<%=basePath%>static/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="<%=basePath%>static/lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="<%=basePath%>static/static/h-ui/js/H-ui.js"></script> 
<script type="text/javascript" src="<%=basePath%>static/static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="<%=basePath%>static/lib/highstock/exporting.js"></script>
<script type="text/javascript" src="<%=basePath%>static/lib/highstock/highstock.js"></script>
<title>服务器实时曲线图</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 监控管理 <span class="c-gray en">&gt;</span> 实时曲线 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
	<%--<div class="f-14 c-error">特别声明：Highcharts 是一个用纯 JavaScript编写的一个图表库，仅免费提供给个人学习、个人网站，如果在商业项目中使用，请去Highcharts官网网站购买商业授权。或者您也可以选择其他免费的第三方图表插件，例如百度echarts。本人不承担任何版权问题。</div>
	--%><div id="container" style="min-width:400px;height:500px;"></div>
</div>
<script language="javascript" type="text/javascript">
var chart;
var stompClient = null;
$(function () {
    Highcharts.setOptions({
        global : {
            useUTC : false
        }
    });
    // Create the chart
    chart = $('#container').highcharts('StockChart', {
        chart : {
            events : {
                load : function () {
                	var series0 = this.series[0];
                	var series1 = this.series[1];
                	var series2 = this.series[2];
                	
                     var socket = new SockJS("http://localhost:8080/ComSystem/monitor");  
                     stompClient = Stomp.over(socket);  
                     stompClient.connect({}, function(frame) {  
                         console.log('Connected: ' + frame);  
                         stompClient.subscribe('/topic/actual', function(data){  
                             //该方法是接收广播消息。
                             var x = (new Date()).getTime();
                             console.log('cpuUsage: ' +  
                            		 parseInt(JSON.parse(data.body).cpuUsage) 
                            		 +',memoryUsage:'+
                            		 parseInt(JSON.parse(data.body).memoryUsage)
                            		 +',JVMMemoryUsage:'+
                                		 parseInt(JSON.parse(data.body).JVMMemoryUsage)); 
                             series0.addPoint([x, parseInt(JSON.parse(data.body).cpuUsage)], true, true);
                             series1.addPoint([x, parseInt(JSON.parse(data.body).memoryUsage)], true, true);
                             series2.addPoint([x, parseInt(JSON.parse(data.body).jvmmemoryUsage)], true, true);
                         }); 
                     });  
                	 // set up the updating of the chart each second
                    /*var series = this.series[0];
                    setInterval(function () {
                        var x = (new Date()).getTime(), // current time
                            y = Math.round(Math.random() * 100);
                        series.addPoint([x, y], true, true);
                    }, 1000);*/ 
                    
             		$.ajax({
         				type : "POST",
         				dataType:"json",
         				url:'<%=basePath%>actual/search.shtml'
         			});
                }
            }
        },
        legend: {  
            enabled: true,  
            layout: 'vertical',  
            align: 'left',  
            verticalAlign: 'top',  
            backgroundColor: '#FCFFC5',  
            borderColor: 'black',  
            borderWidth: 2,  
            shadow: true  
        },  
        rangeSelector: {
        	 buttons: [{  
                 count: 1,  
                 type: 'minute',  
                 text: '1分钟'  
             }, {  
                 count: 5,  
                 type: 'minute',  
                 text: '5分钟'  
             }, {  
                 count: 1,  
                 type: 'hour',  
                 text: '1小时'  
             }, {  
                 count: 2,  
                 type: 'hour',  
                 text: '2小时'  
             }, {  
                 type: 'all',  
                 text: '所有'  
             }],  
             inputEnabled: true,  
             selected: 1
        },
        title : {
            text : '服务器实时曲线'
        },
        exporting: {
            enabled: false
        },
        xAxis: {  
            title: {  
                text: 'time'  
            },  
            type: 'datetime',  
            tickPixelInterval: 50  
        },  

        yAxis: [{  
            title: {  
                text: 'value'  
            },  
            plotLines: [{  
                value: 0,  
                width: 1,  
                color: '#808080'  
            }]  
        }], 
        series : [{
            name : 'CPU使用率',
            type: 'spline',
            data : (function () {
                // generate an array of random data
                var data = [], time = (new Date()).getTime(), i;
                
                for (i = -999; i <= 0; i += 1) {
                    data.push([
                        time + i * 1000,
                        0
                    ]);
                }
                return data;
            }())
        },
        {
            name : 'Memory使用率',
            type: 'spline',
            data : (function () {
                // generate an array of random data
                var data = [], time = (new Date()).getTime(), i;
                
                for (i = -999; i <= 0; i += 1) {
                    data.push([
                        time + i * 1000,
                        0
                    ]);
                }
                return data;
            }())
        },
        {
            name : 'JVMmem使用率',
            type: 'spline',
            data : (function () {
                // generate an array of random data
                var data = [], time = (new Date()).getTime(), i;
                
                for (i = -999; i <= 0; i += 1) {
                    data.push([
                        time + i * 1000,
                        0
                    ]);
                }
                return data;
            }())
        }]
    });
    
    
    
});
</script>
</body>
</html>
